<template>
  <div class="DecRoot">
    <el-card class="box-card">
      <div class="headerBox">
        <div class="leftBox">直播选品</div>
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogVisible = true"
          plain
          >批量审核</el-button
        > -->
      </div>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="商品名称">
            <el-input v-model="ipageCofig.goodsName"></el-input>
          </el-form-item>
          <el-button
            size="small"
            @click="getList"
            style="margin-top: 3px"
            type="primary"
            >查询</el-button
          >
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card newCard">
      <div class="tableBox">
        <el-table
          :data="tableData"
          header-cell-class-name="tableHeader"
          style="width: 100%"
          height="66vh"
        >
          <el-table-column prop="date" label="商品图片/标题">
            <template slot-scope="scope">
              <div class="shopsData">
                <img :src="scope.row.pictureOriginal" class="newImg" alt="" />
                <div class="shopsDataBox">
                  <div class="nameBox">{{ scope.row.goodsName }}</div>
                  <div class="Model">{{ scope.row.storeName }}</div>
                  <div class="Model">
                    {{ scope.row.productColorNumber }}色
                    {{ scope.row.productYardNumber }}码
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">商品价格：{{ scope.row.price }}</div>
                <!-- <div class="Model">清仓价格：{{ scope.row.specialPrice }}</div> -->
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="shopName" label="商品数据">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">报名数量：{{ scope.row.specialSock }}</div>
              </div>
            </template>
          </el-table-column> -->

          <el-table-column prop="time" label="创建时间">
            <template slot-scope="scope">
              <div class="shopsDataBox">
                <div class="Model">首次发布：{{ scope.row.createTime }}</div>
                <div class="Model">最后修改：{{ scope.row.updateTime }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态">
            <template slot-scope="scope">
              {{
                scope.row.specialStatus == 0
                  ? "审核中"
                  : scope.row.specialStatus == 1
                  ? "审核通过"
                  : "审核拒绝"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="详情"
                placement="top"
              >
                <img
                  @click="getDetails(scope.row)"
                  src="@/assets/image/icon/details.png"
                  class="iconImg"
                  alt=""
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <div></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="ipageCofig.pageSize"
          :current-page.sync="ipageCofig.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">商品详情</div>
        <div class="chahao" @click="dialogVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px; height: 50vh; overflow-y: auto">
        <el-form ref="form" :model="form" label-width="auto">
          <el-form-item label="商品名称：">
            {{ form.goodsName }}
          </el-form-item>
          <el-form-item label="货款货号：">
            {{ form.productCode }}
          </el-form-item>
          <el-form-item label="图片包：">
            <el-button
              type="text"
              @click="winOpen(form.picturePack)"
              style="padding-left: 0"
              >查看图片包</el-button
            >
          </el-form-item>
          <el-form-item
            :label="item.productAttributeName + '：'"
            v-for="(item, index) in form.pmsProductAttributeValues"
            :key="index"
          >
            {{ item.value }}
          </el-form-item>
          <el-form-item label="身高：">
            <div
              style="
                font-family: PingFang SC;
                font-size: 12px;
                color: #999999;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 0.44rem;
                border-bottom: 0.01rem solid #e8e8e8;
                padding-bottom: 0.26rem;
              "
            >
              <div
                v-for="(item, index) in form.pmsSkuDTOS"
                @click="sizeindex = index"
                :key="index"
                :class="{ isacitive: sizeindex == index }"
                style="
                  padding: 6px;
                  border: 0.01rem solid #a7adb8;
                  margin-right: 10px;
                  cursor: pointer;
                  margin-bottom: 10px;
                "
              >
                {{ item.size }}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="颜色：">
            <div
              style="
                font-family: PingFang SC;
                margin-top: 0.15rem;
                font-size: 12px;
                color: #999999;
                display: flex;
                align-items: center;
              "
              v-for="(item, index) in form.pmsSkuStocks"
              :key="index"
            >
              <!-- <img
                :src="item.picture"
                alt=""
                style="margin-left: 0.19rem; width: 20px; height: 20px"
              /> -->
              <el-image
                style="margin-left: 0.19rem; width: 20px; height: 20px"
                :src="item.picture"
                :preview-src-list="[item.picture]"
              >
              </el-image>
              <span
                style="
                  font-size: 12px;
                  color: #000000;
                  margin-left: 15px;
                  width: 100px;
                "
                >{{ item.color }}</span
              ><span>{{ item.newSpData[sizeindex].price }}元</span>
            </div>
          </el-form-item>
          <!-- <el-form-item label="主图：">
            <el-image
              style="width: 100px; height: 100px"
              :src="form.pictureOriginal"
              :preview-src-list="[form.pictureOriginal]"
            >
            </el-image>
          </el-form-item> -->
          <el-form-item label="图片信息：">
            <div style="display: flex; flex-wrap: wrap">
              <el-image
                v-for="(item, index) in form.pictureSmall"
                :key="index"
                style="
                  width: 100px;
                  height: 100px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :src="item"
                :preview-src-list="[item]"
              >
              </el-image>
            </div>
          </el-form-item>
          <el-form-item label="长图：">
            <el-image
              style="width: 100px; height: 100px"
              :src="form.pictureLong"
              :preview-src-list="[form.pictureLong]"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="商品描述视频：">
            <videos
              style="width: 300px; height: 200px"
              :url="form.descriptionVideo"
              v-if="form.descriptionVideo"
            ></videos>
          </el-form-item>
          <el-form-item label="商品讲解视频：">
            <videos
              style="width: 300px; height: 200px"
              :url="form.explainVideo"
              v-if="form.explainVideo"
            ></videos>
          </el-form-item>
          <el-form-item label="原图保障：">
            {{ form.imageProtection == 0 ? "否" : "是" }}
          </el-form-item>
          <el-form-item label="补货时间：">
            {{
              form.replenishmentTime == 0 || !form.replenishmentTime
                ? "不确定"
                : `${form.replenishmentTime}天`
            }}
          </el-form-item>
          <el-form-item label="买家秀：">
            {{ form.buyersShow == 0 ? "不支持" : "支持" }}
          </el-form-item>
          <el-form-item label="售后保障：">
            {{ form.returnGoods ? "支持15天退货" : "" }}
            {{ form.exchangeGoods ? " ， 支持15天换货" : "" }}
          </el-form-item>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button
          type="primary"
          @click="auditSpecialProduct(1)"
          v-if="form.specialStatus == 0"
        >
          审核通过</el-button
        >
        <el-button
          type="danger"
          @click="auditSpecialProductB(2)"
          v-if="form.specialStatus == 0"
        >
          审核拒绝</el-button
        >
        <el-button @click="dialogVisible = false"> 取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  selectProductByParams,
  auditSpecialProduct,
} from "@/api/CommodityManagement";
import videos from "@/components/video";
export default {
  name: "helpCenter",
  components: { videos },
  data() {
    return {
      form: {
        id: "",
        name: "",
        value: "",
      },
      dialogVisible: false,
      tableData: [],
      total: 0,
      ipageCofig: {
        pageNumber: 1,
        pageSize: 10,
        goodsName: "",
        productCode: "",
        categoryId: "",
        createTime: "",
        updateTime: "",
        picturePackFlag: "",
        type: 2,
        status: " ",
        isStore: 0,
      },
      sizeindex: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //审核
    auditSpecialProduct(status) {
      this.$confirm("请确认审核成功", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        auditSpecialProduct({
          id: this.form.liveId,
          status: status,
        }).then((data) => {
          if ((data.code = 200)) {
            this.$message.success("操作成功");
            this.dialogVisible = false;
            this.getList();
          }
        });
      });
    },
    //审核拒绝
    auditSpecialProductB(status) {
      this.$prompt("请输入拒绝原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        auditSpecialProduct({
          id: this.form.liveId,
          status: status,
          messages:value
        }).then((data) => {
          if ((data.code = 200)) {
            this.$message.success("操作成功");
            this.dialogVisible = false;
            this.getList();
          }
        });
      });
    },
    //win跳转
    winOpen(url) {
      window.open(url);
    },
    //获取详情
    getDetails(row) {
      let data = {
        data: {},
      };
      data.data = JSON.parse(JSON.stringify(row));
      data.data.pmsSkuStocks.forEach((item) => {
        item.newSpData = [];
      });
      data.data.pmsSkuStocks.forEach((item) => {
        item.spData = JSON.parse(item.spData);
        item.spData.forEach((item1) => {
          const obj = JSON.parse(JSON.stringify(item1));
          item.newSpData.push(JSON.parse(obj));
        });
      });
      data.data.pictureSmall = data.data.pictureSmall.split(",");
      data.data.pictureSmall.unshift(data.data.pictureOriginal);
      data.data.intro = data.data.intro.split(",");
      let arr = [];
      arr = JSON.parse(JSON.stringify(data.data.pmsSkuDTOS));
      const num = data.data.pmsSkuDTOS.length / data.data.pmsSkuStocks.length;
      data.data.pmsSkuDTOS = arr.slice(0, num);
      this.form = data.data;
      this.dialogVisible = true;
    },
    //获取列表
    getList() {
      selectProductByParams(this.ipageCofig).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      this.ipageCofig.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.ipageCofig.pageNumber = val;
      this.getList();
    },
  },
};
</script>
  
  <style scoped lang="scss">
.isacitive {
  border: 0.01rem solid #ec6c15 !important;
  color: #ec6c15;
}
.btnBox {
  display: flex;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;

  .btnImg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
}

.DecRoot {
  padding: 20px;
  padding-left: 5px;
  padding-bottom: 0;

  .newCard {
    height: 75vh;
    margin-top: 20px;
  }

  /deep/ .el-button {
    padding: 9px 15px;
  }

  .el-card {
    .headerBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .leftBox {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;

        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-input--suffix {
          width: 200px;
        }
      }
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    /deep/ .tableHeader {
      background: #edf3ff;
      font-weight: 700;
      color: #666666;
    }

    .iconImg {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 10px;
    }

    .pagination {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      /deep/ .el-pagination__editor.el-input .el-input__inner {
        height: 28px !important;
      }

      /deep/ .el-input--mini .el-input__inner {
        height: 28px !important;
      }
    }
  }
}
</style>
    <style scoped lang="scss">
.search {
  display: flex;
}
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-form-item__content {
    width: 75%;
  }
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .tableHeader {
    background: #edf3ff;
    font-weight: 700;
    color: #666666;
    padding: 5px 0;
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/assets/image/icon/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      color: #e65f00;
      cursor: pointer;
    }
  }
  /deep/ .el-input {
    width: 100% !important;
  }
}
/deep/ .el-dialog__header {
  font-weight: 700;
}
/deep/ .demo-ruleForm {
  padding: 10px;
}

/deep/ .el-form-item {
  margin-bottom: 8px;
}
/deep/ .el-form-item__error {
  z-index: 99;
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
.dialogTextBox {
  font-size: 14px;
  color: #000000;
}
</style>
  